<template>
  <div class="top0">
    <!-- 查询行 -->
    <p class="You">
      <label for="">订单状态</label>
      <input type="text" placeholder="全部订单" />
      <label for="">订单编号</label>
      <input type="text" v-model="InputCx" />
      <button @click="handelCZ">重置</button>
      <button @click="handelRes">确定</button>
    </p>
    <div class="dDbottom">
      <div class="bottom2">
        <div class="title">
          <span class="num">订单编号</span>
          <span class="user">实付金额</span>
          <span class="city">快递金额</span>
          <span class="sq">收货人</span>
          <span class="dz">收货地址</span>
          <span class="timer">支付方式</span>
          <span class="siz">订单状态</span>
        </div>
      </div>
    </div>
  </div>
  <!-- 准备渲染数据 -->
  <div v-for="item in dingData" :key="item.goodsId">
    <div class="title2">
      <input type="checkbox" />
      <!-- id -->
      <span class="num">{{ item.goodsId }}</span>
      <!-- 名字 -->
      <span class="user">{{ item.code }}</span>
      <!-- 地区 -->
      <span class="city">{{ item.goodsSale }}</span>
      <span class="sq">{{ item.name }}</span>
      <span class="timer">{{ item.goodsAddress }}</span>
      <span class="siz">{{
        item.goodsSale % 2 !== 0 ? "支付宝" : "微信"
      }}</span>
      <span>待支付</span>
    </div>
  </div>
  <div class="pages1">
    <el-pagination
      small
      background
      :total="50"
      class="mt-4"
      @current-change="fn"
    />
  </div>
</template>

<script lang="ts">
import Mock from "@/mock/Data";
import { onMounted, ref, watch } from "vue";

export default {
  setup() {
    const dingData = ref([]);
    const page = ref(1);
    const size = ref(15);
    const InputCx = ref("");

    // 点击查询订单
    const handelRes = async () => {
      const listAdd: any = await Mock.CxiDS({ id: +InputCx.value });
      dingData.value = listAdd.result;
      InputCx.value = "";
    };
    // 点击重置查询
    const handelCZ = async () => {
      const cityList: any = await Mock.cityData({
        page: page.value,
        size: size.value,
      });
      dingData.value = cityList.result;
      InputCx.value = "";
    };

    // 请求数据
    onMounted(async () => {
      const cityList: any = await Mock.cityData({
        page: page.value,
        size: size.value,
      });
      dingData.value = cityList.result;
    });
    // 分页效果
    const fn = async (n: number) => {
      const cityList: any = await Mock.cityData({
        page: n,
        size: size.value,
      });
      dingData.value = cityList.result;
    };

    return {
      dingData,
      InputCx,
      handelRes,
      fn,
      handelCZ,
    };
  },
};
</script>

<style lang="less" scoped>
.pages1 {
  margin-top: 15px;
  float: right;
}

.You {
  display: flex;
  justify-content: flex-start;
  label {
    font-size: 16px;
    color: #555656;
    margin-right: 15px;
    font-weight: 600;
  }
  input {
    width: 150px;
    height: 25px;
    background: #eeeeee;
    border: 0;
    margin-right: 25px;
    border-radius: 5px;
    color: black;
    text-indent: 10px;
    padding-left: 5px;
  }
  button {
    width: 70px;
    height: 30px;
    background: #5f4e72;
    border-radius: 4px;
    color: white;
    border: 0;
    margin-right: 15px;
  }
}

// 标题渲染
.bottom2 .title {
  text-indent: 15px;
  margin-top: 15px;
  width: 100%;
  height: 50px;
  display: inline-flex;
  align-items: center;
  font-family: SourceHanSansSC-Regular;
  color: #fff;
  background-color: #341a76;
  .num {
    width: 150px;
  }
  .user {
    width: 150px;
  }
  .city {
    width: 150px;
  }
  .sq {
    width: 150px;
  }
  .dz {
    width: 250px;
  }
  .timer {
    width: 150px;
  }
}

.title2 {
  text-indent: 15px;
  margin-top: 5px;
  width: 100%;
  height: 25px;
  display: inline-flex;
  align-items: center;
  font-family: SourceHanSansSC-Regular;
  color: black;

  .num {
    width: 150px;
  }
  .user {
    width: 150px;
  }
  .city {
    width: 150px;
    display: inline-block;
  }
  .sq {
    width: 120px;
  }
  .dz {
    width: 150px;
  }
  .timer {
    width: 280px;
    white-space: nowrap;
  }
  .siz {
    width: 150px;
  }
}
</style>
